<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
	<!-- saved from url=(0014)about:internet -->
	<head>
		<title>Exposure - Demo 4</title>
		<link href="demo4.css?v=1.0" type="text/css" rel="stylesheet" />
		<script src="res/jquery-1.6.4.min.js" type="text/javascript"></script>
		<script src="../jquery.exposure.js?v=1.0" type="text/javascript"></script>
		<script type="text/javascript">
			$(function(){
				var gallery = $('#images');
				gallery.exposure({carouselControls : true,
					imageControls : true,
					pageSize : 5,
					slideshowControlsTarget : '#slideshow',
					onThumb : function(thumb) {
						var li = thumb.parents('li');				
						var fadeTo = li.hasClass($.exposure.activeLinkClass) ? 1 : 0.3;
						
						thumb.css({display : 'none', opacity : fadeTo}).stop().fadeIn(200);
						
						thumb.hover(function() { 
							thumb.fadeTo('fast',1); 
						}, function() { 
							li.not('.' + $.exposure.activeLinkClass).children('img').fadeTo('fast', 0.3);
						});
					},
					onImage : function(image, imageData, thumb) {
						// Fade out the previous image.
						image.siblings('.' + $.exposure.lastImageClass).stop().fadeOut(500, function() {
							$(this).remove();
						});
						
						// Fade in the current image.
						image.hide().stop().fadeIn(1000);
						
						if (gallery.showThumbs && thumb && thumb.length) {
							thumb.fadeTo('fast', 1).addClass($.exposure.selectedImageClass);
						}
					},
					onCarousel : function(firstImage, lastImage) {
						$('.' + $.exposure.thumbsClass + ' li').hide().children('img.' + $.exposure.selectedImageClass).stop().css('opacity', 0.3).removeClass($.exposure.selectedImageClass);
					},
					onSlideshowPlayed : function() {
						$('.' + $.exposure.pauseSlideshowClass).css('display','inline');
					}
				});
				
				$('#left a').click(function() {
					gallery.nextImage();
				});
				
				$('#right a').click(function() {
					gallery.prevImage();
				});
			});
		</script>
	</head>
	<body>
		<div id="top">
			<h1>Exposure - Demo 4 (<span id="slideshow"></span>)</h1>
			<div class="panel">	
				<div id="left"><a href="javascript:void(0);"><img src="res/left.png" alt="Previous" /></a></div>				
				<ul id="images">
					<li><a href="slides/IMG_2198.jpg"><img src="thumbs/IMG_2198.jpg" title="Home made" /></a></li>
					<li><a href="slides/IMG_2339.jpg"><img src="thumbs/IMG_2339.jpg" title="Chocolate" /></a></li>
					<li><a href="slides/IMG_2446.jpg"><img src="thumbs/IMG_2446.jpg" title="Love birds" /></a></li>
					<li><a href="slides/IMG_2623.jpg"><img src="thumbs/IMG_2623.jpg" title="Blue" /></a></li>
					<li><a href="slides/IMG_5077.jpeg"><img src="thumbs/IMG_5077.jpeg" title="White" /></a></li>
					<li><a href="slides/IMG_5177.jpeg"><img src="thumbs/IMG_5177.jpeg" title="Yellow on blue" /></a></li>			
					<li><a href="slides/IMG_5278.jpeg"><img src="thumbs/IMG_5278.jpeg" title="Heat" /></a></li>
					<li><a href="slides/IMG_5324.jpeg"><img src="thumbs/IMG_5324.jpeg" title="Cold" /></a></li>
					<li><a href="slides/IMG_5650.jpeg"><img src="thumbs/IMG_5650.jpeg" title="Homes" /></a></li>
					<li><a href="slides/IMG_9006.jpg"><img src="thumbs/IMG_9006.jpg" title="Ace" /></a></li>
				</ul>	
				<div id="right"><a href="javascript:void(0);"><img src="res/right.png" alt="Next" /></a></div>
				<div class="clear"></div>
			</div>
		</div>
		<div id="main">
			<div id="exposure"></div>
			<div class="clear"></div>	
		</div>
		<p class="info"><a href="demo3.html?v=1.0">View previous demo</a> | <a href="demo5.html?v=1.0">View next demo</a></p>
		<p class="info">This is a demo showing the <a href="http://exposure.blogocracy.org/">Exposure plugin for jQuery</a>. With Exposure you can give your gallery any look you want, this is just an example. <a href="http://exposureforjquery.wordpress.com/download/">Download Exposure</a> or <a href="http://exposure.blogocracy.org/">learn more</a>.</p>
	</body>
</html>
